<template>
    <div class="crm-rental-container">
        <el-dialog title="租借详情" v-model="isShowDialog" width="95%" :close-on-click-modal="false" :style="{ minHeight: '500px' }">
            <el-tabs v-model="activeName" class="contract-detail">
                <el-tab-pane label="租借详情" name="rental">
                    <el-descriptions :column="4" border>
                        <el-descriptions-item label="租借方名称">{{ rental.rentalName }}</el-descriptions-item>
                        <el-descriptions-item label="人才姓名">{{ rental.talenterName }}</el-descriptions-item>
                        <el-descriptions-item label="联系人姓名">{{ rental.contractName }}</el-descriptions-item>
                        <el-descriptions-item label="手机号码">{{ rental.contractMobile }}</el-descriptions-item>
                        
                        <el-descriptions-item label="租借开始时间">{{ rental.rentalStartTime }}</el-descriptions-item>
                        <el-descriptions-item label="租借结束时间">{{ rental.rentalEndTime }}</el-descriptions-item>
                        <el-descriptions-item label="租借金额">{{ rental.rentalAmount }}元</el-descriptions-item>
                        <el-descriptions-item label="结算单位">{{ rentalUnitText(rental.rentalUnit) }}</el-descriptions-item>

                        <el-descriptions-item label="所在省份">{{ rental.areaName }}</el-descriptions-item>
                        <el-descriptions-item label="工作地点">{{ rental.workLocation }}</el-descriptions-item>
                        <el-descriptions-item label="到期状态">{{ expiryStatusText(rental.expiryStatus) }}</el-descriptions-item>
                        <el-descriptions-item label="到期天数">
                            <span v-if="rental.expiryDay == -99999"></span>
                            <span v-else-if="rental.expiryDay >= 0">还有 {{ rental.expiryDay }} 天到期</span>
                            <span v-else-if="rental.expiryDay < 0" class="color-danger">已到期 {{ -rental.expiryDay }} 天，请及时续期</span>
                        </el-descriptions-item>

                        <el-descriptions-item label="技能要求">{{ rental.requiredSkill }}</el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions :column="4" border class="mt15">
                        <el-descriptions-item label="创建者">{{ rental.createBy }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ rental.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="更新者">{{ rental.updateBy }}</el-descriptions-item>
                        <el-descriptions-item label="更新时间">{{ rental.updateTime }}</el-descriptions-item>
                        <el-descriptions-item label="备注">{{ rental.remark }}</el-descriptions-item>
                    </el-descriptions>
                </el-tab-pane>
                <el-tab-pane label="人才详情" name="talenter">
                    <el-descriptions :column="4" border>
                        <el-descriptions-item label="人才姓名">{{ talenter.talenterName }}</el-descriptions-item>
                        <el-descriptions-item label="身份证号码">{{ talenter.idNumber }}</el-descriptions-item>
                        <el-descriptions-item label="人才资质">{{ getDictionaryText('crm_qualification_type', talenter.qualification) }}</el-descriptions-item>
                        <el-descriptions-item label="人才许可证">{{ getDictionaryText('crm_license_type', talenter.license) }}</el-descriptions-item>
                        
                        <el-descriptions-item label="开始时间">{{ talenter.signStartTime }}</el-descriptions-item>
                        <el-descriptions-item label="结束时间">{{ talenter.signEndTime }}</el-descriptions-item>
                        <el-descriptions-item label="账号名称">{{ talenter.account }}</el-descriptions-item>
                        <el-descriptions-item label="账号密码">{{ talenter.password }}</el-descriptions-item>

                        <el-descriptions-item label="手机号码">{{ talenter.mobile }}</el-descriptions-item>
                        <el-descriptions-item label="电话号码">{{ talenter.telephone }}</el-descriptions-item>
                        <el-descriptions-item label="邮箱号码" :span="2">{{ talenter.email }}</el-descriptions-item>
                        <el-descriptions-item label="审核状态">{{ examineStatusText(talenter.examineStatus) }}</el-descriptions-item>
                        
                        <el-descriptions-item label="到期状态">{{ expiryStatusText(talenter.expiryStatus) }}</el-descriptions-item>
                        <el-descriptions-item label="到期天数">
                            <span v-if="talenter.expiryDay == -99999"></span>
                            <span v-else-if="talenter.expiryDay >= 0">还有 {{ talenter.expiryDay }} 天到期</span>
                            <span v-else-if="talenter.expiryDay < 0" class="color-danger">已到期 {{ -talenter.expiryDay }} 天，请及时续期</span>
                        </el-descriptions-item>
                    </el-descriptions>
                    <el-descriptions :column="4" border class="mt15">
                        <el-descriptions-item label="创建者">{{ talenter.createBy }}</el-descriptions-item>
                        <el-descriptions-item label="创建时间">{{ talenter.createTime }}</el-descriptions-item>
                        <el-descriptions-item label="更新者">{{ talenter.updateBy }}</el-descriptions-item>
                        <el-descriptions-item label="更新时间">{{ talenter.updateTime }}</el-descriptions-item>
                        <el-descriptions-item label="备注">{{ talenter.remark }}</el-descriptions-item>
                    </el-descriptions>
                    <el-carousel class="mt15" height="800px" :autoplay="false" v-if="talenter.attachments && talenter.attachments.length > 0">
                        <el-carousel-item v-for="item in talenter.attachments" :key="item">
                            <center>
                                <template v-if="item.url.toLowerCase().endsWith('.pdf')">
                                    <iframe :src="getStorageAccessTokenUrl(item.url)" width="100%" height="800px" frameborder="0"></iframe>
                                </template>
                                <template v-else>
                                    <el-image style="max-width: auto; height: 800px;" :src="getStorageAccessTokenUrl(item.url)" fit="contain" />
                                </template>
                            </center>
                        </el-carousel-item>
                    </el-carousel>
                </el-tab-pane>
            </el-tabs>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs } from 'vue';
import { Session } from '/@/utils/storage';
import { getCrmRental } from '/@/api/crm/rental/index';
import { getDictionaryByLabel } from '/@/api/system/dictionary/index';
export default {
    name: 'crm/rental/info',
    setup(props, context) {
        const state = reactive({
            isShowDialog: false,
            activeName: 'rental',
            rental: {
                talenter: {},
            },
            talenter: {
                attachments: [],
            },
            dictionary: new Map(),
        });

        const rentalUnitText = (unit: String) => {
            const unitMap = {
                'H': '每小时',
                'D': '每天',
                'M': '每月',
                'Y': '每年'
            };
            return unitMap[unit] || '未知';
        };

        const examineStatusText = (status: String) => {
            const statusMap = {
                '0': '草稿',
                '1': '审核中',
                '2': '通过',
                '3': '驳回',
                '4': '撤回',
                '5': '作废'
            };
            return statusMap[status] || '未知';
        };

        const expiryStatusText = (status: String) => {
            const statusMap = {
                '0': '未到期',
                '1': '即将到期',
                '2': '已到期',
                '3': '已续期',
                '4': '已结束'
            };
            return statusMap[status] || '未知';
        };

        const getDictionaryText = (dictLabel: String, dictValue: String) => {
            const dictionarys = state.dictionary.get(dictLabel) || [];
            return dictionarys.find(item => item.dictValue == dictValue)?.dictName;
        };

        // 打开弹窗
        const openDialog = (row?: object) => {
            state.isShowDialog = true;
            if(row){
                getCrmRental({id: row.id}).then((res) => {
                    if(res.code == 0){
                        state.rental = Object.assign({}, res.data);
                        state.talenter = state.rental?.talenter || {};
                    }
                });
            }
            getDictionaryByLabel({ dictLabel: 'crm_qualification_type' }).then((res: any) => {
                if (res.code == 0) {
                    state.dictionary.set('crm_qualification_type', res.data);
                }
            });
            getDictionaryByLabel({ dictLabel: 'crm_license_type' }).then((res: any) => {
                if (res.code == 0) {
                    state.dictionary.set('crm_license_type', res.data);
                }
            });
        };
        // 关闭弹窗
        const closeDialog = (row?: object) => {
            state.isShowDialog = false;
            for(var key in state.formData) {
                state.formData[key] = undefined;
            }
        };
        const getStorageAccessTokenUrl = (url: String) => {
            return url + '?accessToken=' + Session.get('token');
        };

        return {
            openDialog,
            closeDialog,
            rentalUnitText,
            examineStatusText,
            expiryStatusText,
            getDictionaryText,
            getStorageAccessTokenUrl,
            ...toRefs(state),
        };
    },
};
</script>
<style scoped lang="scss">
.crm-rental-container {
    :deep .el-descriptions .is-bordered-label {
        width: 100px !important; /* 固定宽度为 100px */
    }
}
</style>